<template>
	<page-router-view name="Menus">
		<md-advanced-table :data="table.rows" v-bind="tableAttrs" @edit-closed="editClosed" @row-drop="onRowDrop" ref="xTable">
			<div slot="buttons">
				<v-btn small color="primary" @click="add">新增</v-btn>
			</div>
			<template #drop>
				<span class="drag-btn"><i class="vxe-icon--menu"></i></span>
			</template>
			<template #visible="{row}">
				<vxe-switch v-model="row.visible" @change="onChange(row,'visible', $event)"/>
			</template>
			<template #isEnable="{row}">
				<vxe-switch v-model="row.isEnable" @change="onChange(row, 'isEnable',$event)"/>
			</template>
			<template #action="{row}">
				<v-btn small color="primary" class="mr-1" @click="add({parentId: row.id})" v-if="row.menuType !== 'button'">新增</v-btn>
				<v-btn small color="success" class="mr-1" @click="edit(row)">编辑</v-btn>
				<v-btn small color="error" @click="onDelete(row)">删除</v-btn>
			</template>
		</md-advanced-table>
		<menu-create-dialog ref="create" @success="getTableData"/>
	</page-router-view>
</template>

<script>
import MenuApi from '@/common/api/MenuApi';
import PageRouterView from '@/components/widget/PageRouterView';
import MenuCreateDialog from '@/views/admin/modules/MenuCreateDialog';
import MdAdvancedTable from '@/components/widget/MdAdvancedTable';
import MdTableMixins from '@/common/mixins/MdTableMixins';

export default {
	components: {MdAdvancedTable, MenuCreateDialog, PageRouterView},
	mixins: [MdTableMixins],
	data() {
		return {
			tableAttrs: this.$utils.tableAttrs({
				stripe: false,
				resizable: true,
				toolbarConfig: {
					resizable: true,
					custom: true,
					zoom: true,
					slots: {
						buttons: 'buttons'
					}
				},
				columnKey: true,
				treeConfig: {
					accordion: false,
					reserve: true
				},
				editConfig: {trigger: 'click', mode: 'cell', showStatus: true},
				editRules: {
					sort: [
						{required: true, message: '必须输入'},
						this.$utils.vxeTableValidator('required|integer|min:0|max:9999999'.split('|'))
					]
				},
				columns: [
					this.$utils.gto({field: '#', title: '', slots: {default: 'drop'}, width: 40}),
					this.$utils.gto({field: 'menuName', title: '菜单名称', treeNode: true, align: 'left'}),
					this.$utils.gto({field: 'name', title: '路由名称'}),
					this.$utils.gto({field: 'path', title: '路由路径'}),
					this.$utils.gto({field: 'component', title: '路由组件'}),
					this.$utils.gto({field: 'perms', title: '权限'}),
					this.$utils.gto({field: 'menuType', title: '菜单类型', formatter: ({cellValue}) => this.menuTypeFormatter(cellValue)}),
					this.$utils.gto({field: 'sort', title: '排序', width: 160, editRender: {name: '$input', attrs: {type: 'integer'}}}),
					this.$utils.gto({field: 'isEnable', title: '是否启用', slots: {default: 'isEnable'}, width: 80}),
					this.$utils.gto({field: 'visible', title: '是否显示', slots: {default: 'visible'}, width: 80}),
					this.$utils.gto({field: 'action', title: '操作', width: 200, fixed: 'right', slots: {default: 'action'}, align: 'right'})
				],
				keepSource: true,
				isColumnDrop: true,
				isRowDrop: true,
				id: 'menu',
				rowId: 'id',
				rowDropMoveHook: ({dragged, related}) => {
					let origin = this.$refs.xTable.getRowNode(dragged).item;
					let target = this.$refs.xTable.getRowNode(related).item;
					return origin.parentId === target.parentId;
				}
			}),
			menus: [],
			loadFunc: () => {
				return MenuApi.list()
			}
		}
	},
	created() {
	},
	methods: {
		add(data) {
			this.$refs.create.create(data);
		},
		edit(row) {
			this.$refs.create.edit(row);
		},
		menuTypeFormatter(type) {
			switch (type) {
				case 'list':
					return '目录'
				case 'menu':
					return '菜单'
				case 'button':
					return '按钮'
			}
		},
		editClosed({row}) {
			this.$refs.xTable.validate([row]).then(() => {
				MenuApi.update(row.id, {sort: row.sort, isEnable: row.isEnable, visible: row.visible, parentId: row.parentId})
			})
		},
		onChange(row, key, {value}) {
			let data = {};
			data[key] = value;
			data.parentId = row.parentId;
			MenuApi.update(row.id, data)
		},
		onDelete(row) {
			this.$utils.onConfirm(`是否删除${row.menuName}?`).then(() => {
				MenuApi.delete(row.id).then(res => {
					this.$utils.responseHandler(res, true, true).then(() => {
						this.getTableData();
					})
				})
			});
		},
		onRowDrop({selfNode: {items}}) {
			let sorts = items.map((item, index) => {
				return {
					id: item.id,
					sort: index
				}
			})
			MenuApi.sort(sorts).then(res => {
				this.$utils.responseHandler(res, true, true).then(() => {
					this.getTableData();
				})
			})
		}
	}
}
</script>

<style scoped>

</style>